<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="beforeCloseHandle"
    class="dialog"
    width="500px"
    title="积分充值"
  >
    <el-form ref="queryForm" :model="queryForm" label-width="120px">
      <el-form-item label="当前积分">
        <span>{{ currentIntegral }}</span>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="queryForm.isDeduct" :label="false">充值</el-radio>
        <el-radio v-model="queryForm.isDeduct" :label="true">扣除</el-radio>
      </el-form-item>
      <el-form-item>
        <el-input-number
          :controls="false"
          v-model="queryForm.integral"
          type="number"
          :step="1"
          :min="0"
          step-strictly
          placeholder="请输入积分数"
          >点积分</el-input-number
        >
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog--footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="comfirmClickHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import {
  Component,
  Emit,
  Prop,
  PropSync,
  Vue,
  Watch,
} from "vue-property-decorator";
import { changeIntegral } from "@/api/integral/integral";

@Component
export default class ChargeIntegral extends Vue {
  @PropSync("visible", {
    type: Boolean,
    default: false,
  })
  dialogVisible: boolean;

  @Prop({
    type: Array,
    default: () => {
      return [];
    },
  })
  checkedItem;

  /** 用户输入表单数据 */
  queryForm = {
    integral: null,
    userIds: [],
    isDeduct: false,
  };

  currentIntegral = "";

  @Watch("dialogVisible")
  handleVisibleChange(v) {
    if (v) {
      this.queryForm = {
        integral: "",
        userIds: [],
        isDeduct: false,
      };
      if (this.checkedItem.length > 0) {
        this.queryForm.userIds = this.checkedItem.map((item) => {
          return item.userId;
        });
        this.currentIntegral = this.checkedItem
          .map((item) => item.integral)
          .reduce((curVal, total) => {
            return total + Number(curVal);
          }, 0);
      }
    }
  }

  @Emit("refreshDataList")
  async comfirmClickHandle() {
    const integral = this.queryForm.integral;
    if (!integral || integral <= 0) {
      this.$message({
        type: "warning",
        message: "请填写正确的积分数",
      });
      return;
    }
    if (String(integral).indexOf(".") !== -1) {
      const list = integral.split(".");
      if (list[1].length > 2) {
        list[1] = list[1].substr(0, 2);
      }
      this.queryForm.integral = list[0] + "." + list[1];
    }
    try {
      const res = await changeIntegral(this.queryForm);
      if (res && res.code === 200) {
        this.$message({
          type: "success",
          message: this.queryForm.isDeduct ? "扣除成功" : "充值成功",
        });
        this.dialogVisible = false;
      } else {
        this.$message({
          type: "warning",
          message: res.msg,
        });
      }
    } catch (e) {
      this.$message({
        type: "warning",
        message: e,
      });
    }
  }

  /**
   * 关闭弹窗
   */
  async closeHandle() {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        this.dialogVisible = false;
      }
    } catch (e) {
      console.log(e);
    }
  }

  async beforeCloseHandle(done) {
    try {
      const result = await this.confirmHandle();
      if (result === "confirm") {
        done();
      }
    } catch (e) {
      console.log(e);
    }
  }

  /**
   * 关闭确认
   */
  async confirmHandle() {
    return await this.$confirm("确定退出积分充值页面？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 25px;

  .el-button {
    margin: 30px 0;
  }

  .coupons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;

    .coupon {
      padding-bottom: 30px;
    }
  }
}

.dialog--footer {
  text-align: center;
}
</style>
